<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-top: 10px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"] {
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type="submit"] {
            margin-top: 20px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
        .error {
            color: red;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>用户注册</h2>
        <form id="registerForm">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            <div class="error" id="usernameError"></div>

            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required minlength="6">
            <div class="error" id="passwordError"></div>

            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
            <div class="error" id="confirmPasswordError"></div>

            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
            <div class="error" id="emailError"></div>

            <label for="phone">手机号</label>
            <input type="tel" id="phone" name="phone" placeholder="请输入手机号" required>
            <div class="error" id="phoneError"></div>

            <input type="submit" value="注册">
        </form>
    </div>
    <script>
        document.getElementById("registerForm").addEventListener("submit", function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 清空错误信息
            document.getElementById("usernameError").textContent = "";
            document.getElementById("passwordError").textContent = "";
            document.getElementById("confirmPasswordError").textContent = "";
            document.getElementById("emailError").textContent = "";
            document.getElementById("phoneError").textContent = "";

            // 获取用户输入
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;
            const confirmPassword = document.getElementById("confirmPassword").value;
            const email = document.getElementById("email").value;
            const phone = document.getElementById("phone").value;

            // 验证逻辑
            if (username.length < 3) {
                document.getElementById("usernameError").textContent = "用户名至少需要3个字符";
            }
            if (password.length < 6) {
                document.getElementById("passwordError").textContent = "密码至少需要6个字符";
            }
            if (password !== confirmPassword) {
                document.getElementById("confirmPasswordError").textContent = "两次输入的密码不一致";
            }
            if (!email.includes("@")) {
                document.getElementById("emailError").textContent = "请输入有效的邮箱地址";
            }
            if (phone.length !== 11 || isNaN(phone)) {
                document.getElementById("phoneError").textContent = "请输入有效的手机号码";
            }

            // 如果所有验证通过，可以提交表单
            if (
                username.length >= 3 &&
                password.length >= 6 &&
                password === confirmPassword &&
                email.includes("@") &&
                phone.length === 11 && !isNaN(phone)
            ) {
                alert("注册成功！");
                // 这里可以添加代码将数据发送到服务器
            }
        });
    </script>
</body>
</html>